<template>
	<view>
		<view style="padding: 20rpx;">
			<u-search @search="shou" @clear="getfa" @custom="getfa()" placeholder="搜索律师" action-text="取消"></u-search>
		</view>
		<view>
			<button style="width: 50%;" @click="chang1">排序方式</button>
			<u-dropdown ref="drop">
				<u-dropdown-item :title="fuwu==''?'筛选':fuwu">
					<view style="width: 100%;height: 20vh; background-color: #fff;">
						<view class="item-container">
							<view class="thumb-box" v-for="(item1, index1) in reactive2" v-if="index1>8"  :key="index1" @click="tolist(item1.id,item1.name)">
								<image class="item-menu-image" :src="base+item1.imgUrl" mode=""></image>
								<view class="item-menu-name">{{item1.name}}</view>
							</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</view>
		<uni-group>
			<u-card v-for="(item,index) in reactive" :thumb="base+item.avatarUrl" :title="item.name">
				<view slot="body">
					<view>从业时间：{{item.workStartAt}}</view>
					<view>咨询人数：{{item.serviceTimes}}</view>
					<view>法律专长：{{item.legalExpertiseName}}</view>
					<view>好评率：{{item.favorableRate}}%</view>
					<br>
					<button type="primary" @click="tozhu(item.id)">咨询</button>
				</view>
			</u-card>
		</uni-group>
		<u-action-sheet :list="list" v-model="show" @click="chang"></u-action-sheet>
	</view>
</template>

<script>
	import api from 'commer/apiURL.js'
	export default {
		data() {
			return {
				base:api.baseurl,
				reactive:[],
				reactive2:[],
				fuwu:'',
				name:'',
				show:false,
				list:[ 
					{ text : '默认排序' , value : '' } ,
					{ text : '从业年限' , value : 'workStartAt' } ,
					{ text : '服务人数' , value : 'serviceTimes' } ,
					{ text : '好评率' , value : 'favorableRate' } ,
				] ,
				value:''
			}
		},
		onLoad(options) {
			this.name = options.name
			this.getfa(options.id)
			this.getfen()
			if(options.name != null){
				setTimeout(()=>{
					this.shou(options.name)
				},500)
			}
		},
		methods: {
			tolist(id,name){
				this.getfa(id)
				this.fuwu = name
				this.$refs.drop.close()
			},
			shou(e){
				console.log(e)
				this.reactive = this.reactive.filter((item)=>{
					return item.name.indexOf(e)>=0
				})
			},
			getfa(id){
				this.$get(this.base+'/prod-api/api/lawyer-consultation/lawyer/list',{
					legalExpertiseId:id
				}).then((res)=>{		
					this.reactive = res.rows
				})
			},
			getfen(){
				this.$get(this.base+'/prod-api/api/lawyer-consultation/legal-expertise/list').then((res)=>{		
					this.reactive2 = res.rows
				})
			},
			chang1(){
				this.show = true
			},
			chang(e){
				this.$get(this.base+'/prod-api/api/lawyer-consultation/lawyer/list',{
					sort:this.list[e].value
				}).then((res)=>{		
					this.reactive = res.rows
				})
			},
			tozhu(id){
				uni.navigateTo({
					url:'xiangq2?id='+id
				})
			}
		}
	}
</script>

<style>
	.item-container {
		display: flex;
		flex-wrap: wrap;
	}
	
	.thumb-box {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}
	
	.item-menu-image {
		width: 80rpx;
		height: 80rpx;
	}
</style>
